<template>
  <div>
    <h1>动态组件</h1>
    <ul>
      <li :class="{ active:subject == 'web'}" @click="subject = 'web'">web</li>
      <li :class="{ active:subject == 'java'}" @click="subject = 'java'">java</li>
      <li :class="{ active:subject == 'ui'}" @click="subject = 'ui'">ui</li>
    </ul>
    <hr>
    <component :is="subject" />
  </div>
</template>
<script>
import java from './comp/java.vue'
import ui from './comp/ui.vue'
import web from './comp/web.vue'
export default {
  name: '',
  components: {
    java,
    ui,
    web
  },
  data() {
    return {
      subject: 'web'
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  }
}
</script>
<style lang='scss'  scoped>
ul{
  display: flex;
  li{
    margin: 20px;
    &.active{
      background-color: red;
    }
  }
}
</style>
